summaryrefslogtreecommitdiff
path: root/src/pages/shop/brands/[slug].js
diff options
context:
space:
mode:
authorRafi Zadanly <zadanlyr@gmail.com>2023-02-17 17:07:50 +0700
committerRafi Zadanly <zadanlyr@gmail.com>2023-02-17 17:07:50 +0700
commitf99e0aba70efad0deb907d8e27f09fc9f527c8a4 (patch)
treef0ac96e4e736a1d385e32553f0e641ee27e11fd3 /src/pages/shop/brands/[slug].js
parent90e1edab9b6a8ccc09a49fed3addbec2cbc4e4c3 (diff)
Refactor
Diffstat (limited to 'src/pages/shop/brands/[slug].js')
-rw-r--r--src/pages/shop/brands/[slug].js178
1 files changed, 0 insertions, 178 deletions
diff --git a/src/pages/shop/brands/[slug].js b/src/pages/shop/brands/[slug].js
deleted file mode 100644
index a387e55d..00000000
--- a/src/pages/shop/brands/[slug].js
+++ /dev/null
@@ -1,178 +0,0 @@
-import axios from "axios";
-import { useEffect, useState } from "react";
-import Filter from "@/components/elements/Filter";
-import Footer from "@/components/layouts/Footer";
-import Header from "@/components/layouts/Header";
-import Layout from "@/components/layouts/Layout";
-import Pagination from "@/components/elements/Pagination";
-import ProductCard from "@/components/products/ProductCard";
-import { getIdFromSlug, getNameFromSlug } from "@/core/utils/slug";
-import FilterIcon from "@/icons/filter.svg";
-import apiOdoo from "@/core/utils/apiOdoo";
-import { Swiper, SwiperSlide } from "swiper/react";
-import "swiper/css";
-import "swiper/css/pagination";
-import "swiper/css/autoplay";
-import { Pagination as SwiperPagination } from "swiper";
-import Image from "@/components/elements/Image";
-import LineDivider from "@/components/elements/LineDivider";
-
-export async function getServerSideProps(context) {
- const {
- slug,
- page = 1,
- category = '',
- price_from = '',
- price_to = '',
- order_by = '',
- } = context.query;
-
- let urlParameter = [
- 'q=*',
- `page=${page}`,
- `brand=${getNameFromSlug(slug)}`,
- `category=${category}`,
- `price_from=${price_from}`,
- `price_to=${price_to}`,
- `order_by=${order_by}`
- ].join('&');
- let searchResults = await axios(`${process.env.SELF_HOST}/api/shop/search?${urlParameter}`);
- searchResults = searchResults.data;
-
- const manufacture = await apiOdoo('GET', `/api/v1/manufacture/${getIdFromSlug(slug)}`);
-
- return {
- props: {
- searchResults,
- page,
- slug,
- category,
- price_from,
- price_to,
- order_by,
- manufacture
- }
- };
-}
-
-export default function BrandDetail({
- searchResults,
- page,
- slug,
- category,
- price_from,
- price_to,
- order_by,
- manufacture
-}) {
- const pageCount = Math.ceil(searchResults.response.numFound / searchResults.responseHeader.params.rows);
- const productStart = searchResults.responseHeader.params.start;
- const productRows = searchResults.responseHeader.params.rows;
- const productFound = searchResults.response.numFound;
-
- const [activeFilter, setActiveFilter] = useState(false);
- const [filterCount, setFilterCount] = useState(0);
-
- const route = () => {
- let route = `/shop/brands/${slug}`;
- if (category) route += `&category=${category}`;
- if (price_from) route += `&price_from=${price_from}`;
- if (price_to) route += `&price_to=${price_to}`;
- if (order_by) route += `&order_by=${order_by}`;
- return route;
- }
-
- useEffect(() => {
- let calculateFilterCount = 0;
- if (category) calculateFilterCount++;
- if (price_from || price_to) calculateFilterCount++;
- if (order_by) calculateFilterCount++;
- setFilterCount(calculateFilterCount);
- }, [category, price_from, price_to, order_by]);
-
- return (
- <>
- <Header title={`Distributor ${getNameFromSlug(slug)} Indonesia Harga Official - Indoteknik`} />
- <Filter
- defaultRoute={`/shop/brands/${slug}`}
- isActive={activeFilter}
- closeFilter={() => setActiveFilter(false)}
- defaultPriceFrom={price_from}
- defaultPriceTo={price_to}
- defaultBrand=''
- defaultCategory={category}
- defaultOrderBy={order_by}
- searchResults={searchResults}
- disableFilter={['brand']}
- />
- <Layout>
- <Swiper slidesPerView={1} pagination={{dynamicBullets: true}} modules={[SwiperPagination]}>
- {
- manufacture.banners?.map((banner, index) => (
- <SwiperSlide key={index}>
- <Image
- src={banner}
- alt={`Banner ${manufacture.name}`}
- className="w-full h-auto border-b border-gray_r-6"
- />
- </SwiperSlide>
- ))
- }
- </Swiper>
- <div className="p-4 grid grid-cols-2">
- <div>
- <p className="text-caption-2 text-gray_r-11 mb-2">Produk dari brand:</p>
- { manufacture.logo ? (
- <div className="w-8/12">
- <Image src={manufacture?.logo} alt={manufacture.name} className="border border-gray_r-6 rounded p-3" />
- </div>
- ) : (
- <p className="badge-solid-red text-caption-1">{ manufacture.name }</p>
- ) }
- </div>
- <div className="text-right">
- <p className="text-caption-2 text-gray_r-11 mb-2">Jumlah Produk:</p>
- <p>{ searchResults.response.numFound }</p>
- </div>
- </div>
-
- <LineDivider />
-
- <div className="p-4">
- <h1 className="mb-2">Produk</h1>
- <div className="text-caption-1 mb-4">
- {productFound > 0 ? (
- <>
- Menampilkan&nbsp;
- {pageCount > 1 ? (
- <>
- {productStart + 1}-{
- (productStart + productRows) > productFound ? productFound : productStart + productRows
- }
- &nbsp;dari&nbsp;
- </>
- ) : ''}
- {searchResults.response.numFound}
- &nbsp;produk untuk brand <span className="font-semibold">{getNameFromSlug(slug)}</span>
- </>
- ) : 'Mungkin yang anda cari'}
- </div>
- <button className="btn-light py-2 flex items-center gap-x-2 mb-4" onClick={() => setActiveFilter(true)}>
- <FilterIcon className="w-4 h-4" /> <span>Filter {filterCount > 0 ? `(${filterCount})` : ''}</span>
- </button>
- <div className="grid grid-cols-2 gap-3">
- {searchResults.response.products.map((product) => (
- <ProductCard key={product.id} data={product} />
- ))}
- </div>
-
- <div className="mt-4">
- <Pagination pageCount={pageCount} currentPage={parseInt(page)} url={route()} />
- </div>
- </div>
-
- <Footer />
- </Layout>
- </>
- )
-} \ No newline at end of file